//-------------------------------------------------------------------------------------------------
// author zhangwei on 2015.08.10
// modified by zhangwei on 2015.08.10
// - Released ver v1. This version is the clone from: https://github.com/TahaSh/Tasks-App-With-VueJS
//   And there's a good article about it: http://taha-sh.com/blog/many-js-frameworks-but-vuejs-is-different 
// modified by zhangwei on 2015.08.10
// - Released ver 2. This is a readonly list.
//
// modified by zhangwei on 2015.08.28
// - Add grid component.
//
// Reference
// - http://taha-sh.com/blog/many-js-frameworks-but-vuejs-is-different 
//-------------------------------------------------------------------------------------------------


// TODO on 2015.08.23
// - Uses vue-resource to fetch data from the backend or jQuery ajax to communicate with backend service.
// - Suggest use the standard code pattern in vue grid/table examples. 
//   Better encapsulate the table as a component.



function _find(pagenum, pagesteps){
	var data = [];
	for (var i=0; i<pagesteps; i++)
	{
		data.push({
            rowid: i, 
			selected: (i % 2 == 0), 
			timestamp: '2015.07.08Z23:12:56:324:313', 
			node: '3213121', 
			frame: '56 7F 2A 3D', 
			title: 'Go to grocery store' + i, 
			completed: false
 		});
	}
	return data;
};

function find(vm, inputQuery, pagenumber, pagesteps){
    setTimeout(function (){
		var data =  _find(pagenumber, pagesteps);
		var tmplen = vm.items.length;
		for (var i=0; i<pagesteps; i++)
		{
			data[i].rowid = tmplen + i;
			//vm.items.push(data[i]);
		}
		vm.$set('items', data);
    }, 100)
};



// equvalent to $(document).ready(function(){...}
$(function () {

var tableConf = {
    //isShowHead : false,
    //isShowFoot : false,
    isCheckable : true,
    columns : [
        {'field':'name', 'isSortable':true, 'textAlign':'center', 'textAlign2':'left'},
        'math',
        'chinese',
        {'field':'english', 'text':'英语', 'textAlign2':'center','isSortable':true},
        'operate'
    ],
    onPagerChange : function (num){
        getData(num)
    },
    onSortChange : function (field, dir){
        console.log(field)
        console.log(dir)
    },
    myAlert : function (num){
        alert(num)
    },
    data : []
}

function _getData(pagerNum){
    var myTable = VueUI.getComponent('myTable')

    var data = []
    for (var i=0; i<10; i++){
        data.push(
            {
                name:pagerNum+'_张三'+i,
                math:98,
                chinese:90,
                english:95,
                operate:'<a href="javascript:;" v-on="click:myAlert(\'' + 98 +'\')">详情</a>'
            }
        )
    }
    VueUI.resetArray(tableConf.data, data)
    myTable.totalPage = 10
    myTable.totalCount = 234
    myTable.onPagerChange = function (num){
        getData(num)
        console.log(pagerNum + '_' + num)
    }
}

function getData(pagerNum){
    setTimeout(function (){
        _getData(pagerNum)
    }, 100)
}

x = new Vue({
    el : '#tableTest',
    data : {
        tableConf : tableConf,
        arr : []
    },
    methods : {
        getData : function (){
            getData(1)
        },
        clearData : function (){
            var myTable = VueUI.getComponent('myTable')
            VueUI.resetArray(tableConf.data, [])
            //tableConf.data = []
            //tableConf.data = []
            //myTable.data = []
            myTable.totalPage = 0
            myTable.totalCount = 0
        }
    }
})

	function init()
	{
		// Specify the tab to be displayed at first.
        //$('#myTab a:last').tab('show');
		$('#myTab a[href="#home"]').tab('show');
          
        $('#myTab a').click(function (e) {
			e.preventDefault(); // Prevent the default link behavior ×èÖ¹aÁ´½ÓµÄÌø×ªÐÐÎª
            $(this).tab('show'); // Display the content of the specified tab
		});

		getData(1);
	}


	
	init();
});
  



